<div class="row toggle">
<ol class="breadcrumb col-xs-8 col-sm-10 col-md-11 col-lg-11">
  <li ng-repeat="crumb in products[0].breadcrumb">
     <a ng-href="#/Shop/{{crumb}}">{{crumb}}</a>
  </li>
  <li class="active">{{productLevel}}</li>
</ol>
	<button ng-click="toggleView()" class="btn btn-default toggle-btn" alt="gridView ? 'grid view' : 'list views'">
		<i ng-class="gridView ? 'fa fa-list-ul fa-lg' : 'fa fa-th fa-lg'"></i>
	</button>
</div>
<div class="row">
	<div ng-class="gridView ? 'col-xs-11 col-sm-6 col-md-4' : 'row extra-margin-bottom '" ng-repeat="product in products">
		<div ng-class="gridView ? 'thumbnail extra-padding-top' : 'thumbnail right-caption col-xs-11 col-sm-11 col-md-11 col-lg-11'">
			<img ng-show="gridView" ng-src="{{product.image}}" class="img-rounded" />
			<img ng-hide="gridView"  ng-src="{{product.imageList}}" class="img-rounded" />
			<div class="caption">
				<h3>{{product.name}}</h3>
				<p>{{product.shortDescription}}</p>
				<h4>{{product.price/100 | currency: "&pound;" }}</h4>
				<small> <quantity-warning></quantity-warning>
				</small>
				<p>
					<a href="#/Add/{{product.key}}" ng-class="gridView ? 'btn btn-primary' : 'btn btn-primary pull-right' " role="button">Add to Basket</a>
					 
					<a href="#/Item/{{product.key}}" class="btn btn-success pull-right  margin-right" role="button">More Information</a>
				</p>
			</div>
		</div>
	</div>
</div>

<!--  the break is a fiddle for sticky footer -->
<br />